<template>
  <div class="zj-swiper">
    <el-carousel :interval="4000" type="card" height="200px">
      <el-carousel-item v-for="(item, index) in swipers" :key="index">
        <el-image
          @click="changeUrl(item.targetId)"
          :src="item[`${imgSrc}`]"
          fit="contain"
          style="height: 100%"
        ></el-image>
        <el-tag
          :type="item.typeTitle === '独家' ? 'danger' : 'success'"
          effect="dark"
          style="
            position: absolute;
            top: 76%;
            right: 0;
            border-radius: 10px 0 0 10px;
            height: 19px;
            line-height: 17px;
          "
          >{{ item.typeTitle }}</el-tag
        >
      </el-carousel-item>
    </el-carousel>
  </div>
</template>

<script lang="ts">
import { defineComponent, PropType } from 'vue'
import { TSwiper } from '../type'

export default defineComponent({
  props: {
    swipers: {
      type: Array as PropType<TSwiper[]>,
      default: () => []
    },
    imgSrc: {
      type: String,
      default: 'imageUrl'
    }
  },
  setup() {
    const changeUrl = (targetId: number) => {
      console.log(targetId)
    }
    return {
      changeUrl
    }
  }
})
</script>

<style>
.zj-swiper {
  width: 90%;
  margin: 0 auto;
}
.el-carousel__item h3 {
  color: #475669;
  font-size: 14px;
  opacity: 0.75;
  line-height: 200px;
  margin: 0;
}
</style>
